<template>
    <div class="zx-checkbox-group" role="group" aria-label="checkbox-group">
        <slot />
    </div>
</template>

<script>
import Emitter from '@src/mixins/emitter';

export default {
    name: 'ZxCheckboxGroup',

    componentName: 'ZxCheckboxGroup',

    mixins: [Emitter],

    inject: {
        elFormItem: {
            default: '',
        },
    },

    props: {
        value: {},

        disabled: Boolean,

        min: {
            type: Number,
            default: 0,
        },

        max: {
            type: Number,
            default: 100,
        },

        size: String,

        fill: String,

        textColor: String,
    },

    computed: {
        _zxFormItemSize() {
            return (this.elFormItem || {}).elFormItemSize;
        },
        checkboxGroupSize() {
            return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
        },
    },

    watch: {
        value(value) {
            this.dispatch('zxFormItem', 'el.form.change', [value]);
        },
    },
};
</script>
